<template>
  <!-- state直接使用： -->
  <h2>当前计数：{{ tCounter }}</h2>

  <!-- getters直接使用： -->
  <h2>当前计数加倍：{{ doubleCounter }}</h2>
  <h2>{{ calCounter }}</h2>

  <!-- mutations直接使用： -->
  <button @click="sub">-1</button>
  <button @click="add">+1</button>
  <hr />

  <h3>延时一秒</h3>
  <!-- actions直接使用 -->
  <button @click="subAsyn">-1</button>
  <button @click="addAsyn">+1</button>

  <hr />
</template>

<script>
import { useStore } from "vuex"
import { computed } from "vue"
export default {
  setup() {
    const store = useStore()

    //state直接使用
    //vue3中访问vuex中的数据时，必须通过computed计算属性，才能在模板中响应式显示
    const tCounter = computed(() => store.state.counter)

    //getters直接使用
    const doubleCounter = computed(() => store.getters.doubleCounter)
    const calCounter = computed(() => store.getters.calCounter)

    //mutations直接使用
    const sub = () => store.commit("decrement")
    const add = () => store.commit("increment")

    //actions直接使用
    const subAsyn = () => store.dispatch("decrementAsyn")
    const addAsyn = () => store.dispatch("incrementAsyn")

    return {
      tCounter,
      doubleCounter,
      calCounter,
      sub,
      add,
      subAsyn,
      addAsyn,
    }
  },
}
</script>

<style></style>
